<template>
  <el-form :model="form" :rules="registerRules" ref="formRef" label-width="100px" style="margin-left:100px">
    <div>
      <h3>账号信息</h3>
      <div style="display: flex; align-items: center; margin-top:10px;margin-left:40px">
        <label>头像：</label>
        <el-upload
          style="margin-left:50px;margin-top:-30px"
          aria-label="头像"
          class="avatar-uploader"
          :headers="header"
          action="/api/common/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.avatar" :src="form.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <span v-if="form.avatar" class="el-upload-list__item-actions">
            <span class="el-upload-span" @click.stop="oploadImgDel">删除图片</span>
            <span class="el-upload-span"> 重新上传 </span>
          </span>
        </el-upload>
      </div>
      <el-form-item style="margin-top:30px" label="昵称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入昵称" style="width:25%"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" style="width:25%"></el-input>
      </el-form-item>
      <el-form-item label="考生类型：">
        <el-radio v-model="form.type" label="1">理科</el-radio>
        <el-radio v-model="form.type" label="2">文科</el-radio>
      </el-form-item>
      <el-form-item label="分数：" prop="score">
        <el-input v-model="form.score" placeholder="请输入分数" style="width:25%"></el-input>
      </el-form-item>
      <el-form-item label="位次：" prop="rank">
        <el-input v-model="form.rank" placeholder="请输入位次" style="width:25%"></el-input>
      </el-form-item>
      <el-button style="margin-left:160px;margin-top:10px" type="primary" @click="submitForm">确认修改</el-button>
    </div>
    <br>
    <el-descriptions-item style="color:#9a98a1;margin-left:100px">导航栏数据重新登录后自动更新!!!</el-descriptions-item>
 
  </el-form>
</template>

<script>
import{getBasicInfo,updateBasicInfo}from'@/api/user'
export default {
    data(){
        return{
            
            header:{
                token:this.$store.getters.token
            },
        form: {//注册表单
        username: '',
        name: '',
        avatar:'',
        phone: '',
        gender: '0',//默认是女生
        type: '1',//默认是理科
        score: '',
        rank:'',
      },
       //注册表单验证规则
      registerRules: {
        username: [
          //必填项
           { required: true, message: '请输入用户名', trigger: 'blur' },
           {min: 6,max: 15,message: '用户名长度应该为6-15位之间', trigger:'blur'}
        ],
        name:[
           { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^\d{11}$/, message: '手机号格式不正确', trigger: 'blur' }
          ],
        score:[
          {required:true,message:'请输入成绩',trigger:'blur'},
          {validator:(rule,value,callback)=>{
            const score = parseInt(value);
            if (isNaN(score) || score < 0 || score > 750) {
                callback(new Error('成绩应在0到750之间'));
            } else {
              callback();
              }
          },trigger:'blur'}],
          rank:[ {validator:(rule,value,callback)=>{
            const score = parseInt(value);
            if (isNaN(score) || score < 0 ) {
                callback(new Error('最低位次不能小于0'));
            } else {
              callback();
              }
          },trigger:'blur'}]
    }
        }
    }, 
    created(){
      getBasicInfo().then(res=>{
        if(res.data.code==1){
          this.form=res.data.data
          this.form.type=res.data.data.type.toString()
        }
      })
    }
     ,


    methods: {
      handleAvatarSuccess(res, file) {
        this.form.avatar=res.data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      oploadImgDel() {
    this.form.avatar = ''
    this.$emit('imageChange', this.avatar)
  },
   submitForm() {
    this.$refs.formRef.validate((valid) => {
      if (valid) {
        updateBasicInfo(this.form).then(res=>{
        if(res.data.code===1){
          this.$message.success("信息修改成功")
        }
        })
      }
    });
  }
            
    }

}
</script>
<style lang='scss'>
.borderNone {
  .el-upload {
    border: 1px solid #d9d9d9 !important;
  }
}
</style>
<style scoped lang="scss">
.avatar-uploader .el-icon-plus:after {
  position: absolute;
  display: inline-block;
  content: ' ' !important;
  left: calc(30% - 20px);
  top: calc(30% );
  width: 40px;
  height: 40px;
  background: url('../../assets/common/icon_upload@2x.png') center center
    no-repeat;
  background-size: 20px;
}

.el-upload-list__item-actions:hover .upload-icon {
  display: inline-block;
}
.el-icon-zoom-in:before {
  content: '\E626';
}
.el-icon-delete:before {
  content: '\E612';
}
.el-upload-list__item-actions:hover {
  opacity: 1;
}
.upload-item {
  display: flex;
  align-items: center;
  .el-form-item__content {
    width: 500px !important;
  }
}
.upload-tips {
  font-size: 12px;
  color: #666666;
  display: inline-block;
  line-height: 17px;
  margin-left: 36px;
}
.el-upload-list__item-actions {
  position: absolute;
  width: 160px;
  height: 160px;
  left: 520px;
  top: 168px;
  cursor: default;
  text-align: center;
  color: #dfdada;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 100px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #eee9e9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload:hover {
  border-color: #ffc200;
}
.el-upload-span {
  width: 100px;
  height: 30px;
  border: 1px solid #e8dede;

  font-size: 14px;
  text-align: center;
  line-height: 30px;
}

.el-upload-span:first-child {
  margin-bottom: 20px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}

.avatar {
  width: 160px;
  height: 160px;
  border: 1px;
  border-color:#ffc200;
  border-radius: 100px;
   border: 1px dashed #130c0c;
}
</style>
